<template>
  <div>
    <PageWrapper
      ><template #headerContent>
        <div class="flexBetween">
          <div style="display: flex; align-items: center">
            <ScheduleTwoTone two-tone-color="#4090ff" class="icon" />
            <span @click="openDeptBoardDrawerButtonClick" class="boldFont">{{
              orgBoardData.name
            }}</span>
            <div style="font-size: 15px; margin: 12px 0 0 10px"
              >风险预警值：
              <span v-if="orgStatusData.risk < 40" class="greenFont">{{ orgStatusData.risk }}</span>
              <span v-if="orgStatusData.risk >= 40 && orgStatusData.risk < 60" class="yellowFont">{{
                orgStatusData.risk
              }}</span>
              <span v-if="orgStatusData.risk >= 60 && orgStatusData.risk < 80" class="orangeFont">{{
                orgStatusData.risk
              }}</span>
              <span v-if="orgStatusData.risk >= 80" class="redFont">{{ orgStatusData.risk }}</span
              ><a-tooltip>
                <template #title>{{ orgStatusData.description }}</template>
                <ExclamationCircleOutlined
                  style="margin: 0 5px; color: #9e9e9e"
                /> </a-tooltip></div
          ></div>
          <a-radio-group
            v-model:value="choosetmType"
            style="margin: 0 5px 5px 0"
            button-style="solid"
            @change="changeChooseTm"
          >
            <a-radio-button value="1">本月</a-radio-button>
            <a-radio-button value="2">下个月</a-radio-button>
            <a-radio-button value="3">本季度</a-radio-button>
            <a-radio-button value="4">本年</a-radio-button>
          </a-radio-group>
        </div>
      </template>
      <a-row class="a-row"
        ><a-col :span="7">
          <a-card title="风险分级管控" :headStyle="{ fontSize: '16px', fontWeight: 'bold' }">
            <a-card-grid
              style="width: 33%; height: 100%; text-align: center"
              @click="gotoIdentifyHazard"
            >
              <a-statistic
                title="辨识危险源"
                :value="orgBoardData.identify?.hazardcount"
                style="margin-right: 10px"
                ><template #suffix>
                  <span> 次</span>
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid
              style="width: 33%; height: 100%; text-align: center"
              @click="gotoTroubleLedger"
            >
              <a-statistic
                title="上报隐患"
                :value="orgBoardData.identify?.troublecount"
                style="margin-right: 10px"
                ><template #suffix>
                  <span> 次</span>
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 34%; height: 100%; text-align: center" @click="gotoEvaluate">
              <a-statistic
                title="风险评价"
                :value="orgBoardData.riskevl?.count"
                style="margin-right: 10px"
                ><template #suffix>
                  <span> 次</span>
                </template></a-statistic
              ></a-card-grid
            >
          </a-card>
        </a-col>
        <a-col :span="7">
          <a-card
            title="隐患排查治理"
            @click="gotoTroubleLedger"
            :headStyle="{ fontSize: '16px', fontWeight: 'bold' }"
          >
            <a-card-grid style="width: 33%; height: 100%; flex: 1; text-align: center">
              <a-statistic
                title="总数"
                :value="orgBoardData.troublecorrect?.count"
                style="margin-right: 10px"
            /></a-card-grid>
            <a-card-grid style="width: 33%; height: 100%; flex: 1; text-align: center">
              <a-statistic
                title="已整改"
                :value="orgBoardData.troublecorrect?.correctcount"
                style="margin-right: 10px"
            /></a-card-grid>
            <a-card-grid style="width: 34%; height: 100%; flex: 1; text-align: center">
              <a-statistic
                title="整改率"
                :value="
                  orgBoardData.troublecorrect?.count == 0
                    ? 100
                    : Number(
                        (orgBoardData.troublecorrect?.correctcount /
                          orgBoardData.troublecorrect?.count) *
                          100,
                      ).toFixed(2)
                "
                style="margin-right: 10px"
                ><template #suffix>
                  <span> %</span>
                </template></a-statistic
              ></a-card-grid
            >
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="培训宣传" :headStyle="{ fontSize: '16px', fontWeight: 'bold' }">
            <a-card-grid style="width: 33%; height: 100%; flex: 1; text-align: center">
              <a-statistic :value="orgBoardData.edu?.hour" style="margin-right: 10px">
                <template #title>
                  <HistoryOutlined style="color: #65c7b0; margin-right: 5px" />总时长
                </template>
                <template #suffix>
                  <span> h</span>
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 33%; height: 100%; flex: 1; text-align: center">
              <a-statistic :value="orgBoardData.edu?.personcount" style="margin-right: 10px"
                ><template #title>
                  <UserOutlined style="color: #3e98e2; margin-right: 5px" />总人次
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 34%; height: 100%; flex: 1; text-align: center">
              <a-statistic :value="orgBoardData.edu?.doccount" style="margin-right: 10px"
                ><template #suffix> <span> 份</span> </template>
                <template #title>
                  <FileTextOutlined style="color: #82b7c3; margin-right: 5px" />发放资料
                </template></a-statistic
              ></a-card-grid
            >
          </a-card>
        </a-col>
        <a-col :span="4">
          <a-card :headStyle="{ fontSize: '16px', fontWeight: 'bold' }">
            <template #title
              ><PayCircleOutlined style="color: #50acff; margin-right: 5px" />安全投入资金</template
            >
            <a-statistic :value="orgBoardData.invest?.invest" style="margin-right: 10px">
              <template #suffix>
                <span> 元</span>
              </template></a-statistic
            >
          </a-card>
        </a-col>
      </a-row>
      <a-row class="a-row"
        ><a-col :span="12">
          <a-card
            title="安全生产任务"
            @click="gotoTaskLedger"
            :headStyle="{ fontSize: '16px', fontWeight: 'bold' }"
          >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic :value="orgBoardData.task?.count" style="margin-right: 10px">
                <template #title>
                  <span><RadarChartOutlined style="color: #3997eb; margin-right: 5px" />总数</span>
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                :value="
                  orgBoardData.task?.count == 0
                    ? 100
                    : Number(
                        ((orgBoardData.task?.finishcount + orgBoardData.task?.timeoutfinishcount) /
                          orgBoardData.task?.count) *
                          100,
                      ).toFixed(2)
                "
                style="margin-right: 10px"
                ><template #suffix>
                  <span> %</span>
                </template>
                <template #title>
                  <span>完成率</span>
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                :valueStyle="{ color: 'green' }"
                :value="orgBoardData.task?.finishcount"
                style="margin-right: 10px"
              >
                <template #title>
                  <span
                    ><SmileTwoTone two-tone-color="#58e68a" style="margin-right: 5px" />已完成</span
                  >
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                :valueStyle="{ color: 'orange' }"
                :value="orgBoardData.task?.timeoutfinishcount"
                style="margin-right: 10px"
              >
                <template #title>
                  <span
                    ><FrownTwoTone
                      two-tone-color="#ffb442"
                      style="margin-right: 5px"
                    />超时完成</span
                  >
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                :valueStyle="{ color: 'red' }"
                :value="
                  orgBoardData.task?.count -
                  orgBoardData.task?.finishcount -
                  orgBoardData.task?.timeoutfinishcount
                "
                style="margin-right: 10px"
              >
                <template #title>
                  <span
                    ><WarningTwoTone
                      two-tone-color="#ff7e8e"
                      style="margin-right: 5px"
                    />未完成</span
                  >
                </template></a-statistic
              ></a-card-grid
            >
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card :headStyle="{ fontSize: '16px', fontWeight: 'bold' }">
            <template #title
              ><ThunderboltOutlined style="color: #ffad2a; margin-right: 5px" />安全事故</template
            >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                title="总数"
                :value="orgBoardData.accident?.count"
                style="margin-right: 10px"
            /></a-card-grid>
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                title="重大"
                :value="orgBoardData.accident?.majorcount"
                style="margin-right: 10px"
            /></a-card-grid>
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                title="重伤"
                :value="orgBoardData.accident?.injurednum"
                style="margin-right: 10px"
                ><template #suffix>
                  <span> 人</span>
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                title="死亡"
                :value="orgBoardData.accident?.deathnum"
                style="margin-right: 10px"
                ><template #suffix>
                  <span> 人</span>
                </template></a-statistic
              ></a-card-grid
            >
            <a-card-grid style="width: 20%; height: 100%; text-align: center">
              <a-statistic
                title="直接经济损失"
                :value="orgBoardData.accident?.ecoloss"
                style="margin-right: 10px"
                ><template #suffix>
                  <span> 万元</span>
                </template></a-statistic
              ></a-card-grid
            >
          </a-card>
        </a-col>
      </a-row>
      <a-row class="a-row">
        <a-col :span="6">
          <a-row class="a-row">
            <a-col :span="24">
              <a-card
                title="危险源"
                @click="gotoHazardLedger"
                :headStyle="{ fontSize: '16px', fontWeight: 'bold' }"
              >
                <a-card-grid style="width: 34%; text-align: center">
                  <a-statistic
                    title="总数"
                    :value="orgStatusData.hazard?.count"
                    style="margin-right: 30px"
                /></a-card-grid>
                <a-card-grid style="width: 33%; text-align: center">
                  <a-statistic
                    title="重大"
                    :value="orgStatusData.hazard?.majorcount"
                    style="margin-right: 30px"
                    :value-style="{ color: '#cf1322' }"
                /></a-card-grid>
                <a-card-grid style="width: 33%; text-align: center">
                  <a-statistic
                    title="一般"
                    :value="orgStatusData.hazard?.count - orgStatusData.hazard?.majorcount"
                    style="margin-right: 30px"
                    :value-style="{ color: '#274d8c' }"
                  />
                </a-card-grid>
                <a-card-grid style="width: 100%; text-align: center">
                  <div id="hazardChartDom" style="width: 100%; height: 200px"> </div>
                </a-card-grid>
              </a-card>
            </a-col>
          </a-row>

          <a-row class="a-row">
            <a-col :span="24">
              <a-card
                title="隐患"
                @click="gotoTroubleLedger"
                :headStyle="{ fontSize: '16px', fontWeight: 'bold' }"
              >
                <a-card-grid style="width: 34%; text-align: center">
                  <a-statistic
                    title="总数"
                    :value="orgStatusData.trouble?.count"
                    style="margin-right: 30px"
                /></a-card-grid>
                <a-card-grid style="width: 33%; text-align: center">
                  <a-statistic
                    title="重大"
                    :value="orgStatusData.trouble?.majorcount"
                    style="margin-right: 30px"
                    :value-style="{ color: '#cf1322' }"
                /></a-card-grid>
                <a-card-grid style="width: 33%; text-align: center">
                  <a-statistic
                    title="一般"
                    :value="orgStatusData.trouble?.count - orgStatusData.trouble?.majorcount"
                    style="margin-right: 30px"
                    :value-style="{ color: '#274d8c' }"
                  />
                </a-card-grid>
                <a-card-grid style="width: 100%; text-align: center">
                  <div id="troubleChartDom" style="width: 100%; height: 200px"> </div>
                </a-card-grid>
              </a-card>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="17">
          <a-row class="a-row">
            <a-col :span="24">
              <a-card
                title="隐患治理及风险等级评价"
                :headStyle="{ fontSize: '16px', fontWeight: 'bold' }"
              >
                <a-card-grid @click="gotoTroubleLedger" style="width: 50%; text-align: center">
                  <div id="troubleCorrectDom" style="width: 100%; height: 220px"> </div>
                </a-card-grid>
                <a-card-grid @click="gotoEvaluate" style="width: 50%; text-align: center">
                  <div id="evaluateDom" style="width: 100%; height: 220px"> </div>
                </a-card-grid> </a-card
            ></a-col>
          </a-row>
          <a-row class="a-row">
            <a-col :span="24">
              <a-card
                title="任务"
                @click="gotoTaskLedger"
                :headStyle="{ fontSize: '16px', fontWeight: 'bold' }"
              >
                <a-card-grid style="width: 50%; text-align: center">
                  <div id="taskChartDom1" style="width: 100%; height: 250px"> </div>
                </a-card-grid>
                <a-card-grid style="width: 50%; text-align: center">
                  <div id="taskChartDom2" style="width: 100%; height: 250px"> </div>
                </a-card-grid> </a-card
            ></a-col>
          </a-row>
        </a-col>
      </a-row>
    </PageWrapper>
    <DeptBoardDrawer @register="registerDeptBoardDrawer" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, provide, nextTick, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { OperationTypeEnum } from '/@/enums/appEnum';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';
  import { getUserOrganization } from '/@/api/ehs/organization';
  const { createMessage } = useMessage();
  const { globalProjectCode } = useGlobSetting();
  import { PageWrapper } from '/@/components/Page';
  import { queryEnumOptions } from '/@/api/platform/enum';
  import { getOrgLatestStatus, queryOrgEhsBoard } from '/@/api/ehs/ehsBoard';
  import DeptBoardDrawer from './DeptBoardDrawer.vue';
  import { BasicDrawer, useDrawer } from '/@/components/Drawer';
  import {
    ScheduleTwoTone,
    ExclamationCircleOutlined,
    PayCircleOutlined,
    ThunderboltOutlined,
    HistoryOutlined,
    UserOutlined,
    FileTextOutlined,
    RadarChartOutlined,
    SmileTwoTone,
    FrownTwoTone,
    WarningTwoTone,
  } from '@ant-design/icons-vue';
  import moment from 'moment';
  import * as echarts from 'echarts';
  import { useRouter } from 'vue-router';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  export default defineComponent({
    name: 'EduRecordIndex',
    components: {
      BasicTable,
      TableAction,
      PageWrapper,
      ScheduleTwoTone,
      ExclamationCircleOutlined,
      PayCircleOutlined,
      ThunderboltOutlined,
      HistoryOutlined,
      FileTextOutlined,
      UserOutlined,
      RadarChartOutlined,
      SmileTwoTone,
      FrownTwoTone,
      WarningTwoTone,
      DeptBoardDrawer,
    },
    setup() {
      let myChart1;
      let myChart2;
      let myChart3;
      let myChart4;
      let myChart5;
      let myChart6;
      const userStore = useUserStoreWithOut();
      const option = ref({});
      const router = useRouter();
      const orgBoardData = ref({});
      const orgStatusData = ref({});
      const orgcode = ref('');
      const choosetmType = ref('4');
      const queryTm = ref([
        moment().startOf('year').format('YYYY-MM-DD'),
        moment().endOf('year').format('YYYY-MM-DD'),
      ]);
      const projectCode = ref<String>(globalProjectCode);
      const [registerDeptBoardDrawer, { openDrawer: openDeptBoardDrawer }] = useDrawer();
      function changeChooseTm(e) {
        let op = {
          1: [
            moment().startOf('month').format('YYYY-MM-DD'),
            moment().endOf('month').format('YYYY-MM-DD'),
          ],
          2: [
            moment().subtract(-1, 'month').startOf('month').format('YYYY-MM-DD'),
            moment().subtract(-1, 'month').endOf('month').format('YYYY-MM-DD'),
          ],
          3: [
            moment().startOf('quarter').format('YYYY-MM-DD'),
            moment().endOf('quarter').format('YYYY-MM-DD'),
          ],
          4: [
            moment().startOf('year').format('YYYY-MM-DD'),
            moment().endOf('year').format('YYYY-MM-DD'),
          ],
        };
        queryTm.value = op[e.target.value];
        search();
      }

      function search() {
        let troubleCorrectDom = null;
        let evaluateDom = null;
        let taskChartDom1 = null;
        let taskChartDom2 = null;
        queryOrgEhsBoard({
          orgcode: orgcode.value,
          begintm: queryTm.value[0],
          endtm: queryTm.value[1],
          deptid: 0,
        }).then((res) => {
          orgBoardData.value = res;
          troubleCorrectDom = document.getElementById('troubleCorrectDom');
          evaluateDom = document.getElementById('evaluateDom');
          taskChartDom1 = document.getElementById('taskChartDom1');
          taskChartDom2 = document.getElementById('taskChartDom2');
          myChart3 = echarts.init(troubleCorrectDom);
          myChart4 = echarts.init(taskChartDom1);
          myChart5 = echarts.init(taskChartDom2);
          myChart6 = echarts.init(evaluateDom);
          let option1 = {
            title: [
              {
                text: '隐患治理',
                left: '50%',
                textAlign: 'center',
              },
            ],
            tooltip: {
              trigger: 'item',
            },
            toolbox: {
              show: false,
            },
            color: ['#ffb79d', '#ffe68b', '#b7eaff', '#b1f2ae'],
            series: [
              {
                name: '隐患治理',
                type: 'pie',
                radius: '50%',
                center: ['50%', '50%'],
                label: {
                  formatter: '{b}\n({d}%)',
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
                data: [
                  { value: orgBoardData.value.troublecorrect?.nodispatchcount, name: '未派单' },
                  { value: orgBoardData.value.troublecorrect?.dispatchcount, name: '整改中' },
                  { value: orgBoardData.value.troublecorrect?.correctcount, name: '整改完成' },
                  {
                    value: orgBoardData.value.troublecorrect?.checkcount,
                    name: '已验收',
                  },
                ],
              },
            ],
          };
          let option4 = {
            title: [
              {
                text: '风险等级评价',
                left: '50%',
                textAlign: 'center',
              },
            ],
            tooltip: {
              trigger: 'item',
            },
            toolbox: {
              show: false,
            },
            color: ['#8ed4ff', '#ffee76', '#ff9f12', '#fa7f7c'],
            series: [
              {
                name: '风险等级评价',
                type: 'pie',
                radius: ['20%', '50%'],
                label: {
                  formatter: '{b}\n({d}%)',
                },
                avoidLabelOverlap: false,
                padAngle: 5,
                center: ['50%', '50%'],
                itemStyle: {
                  borderRadius: 8,
                },
                data: [
                  {
                    name: '低风险',
                    value: orgBoardData.value.riskevl?.bluecount,
                  },
                  {
                    name: '一般风险',
                    value: orgBoardData.value.riskevl?.yellowcount,
                  },
                  {
                    name: '较大风险',
                    value: orgBoardData.value.riskevl?.orangecount,
                  },
                  {
                    name: '重大风险',
                    value: orgBoardData.value.riskevl?.redcount,
                  },
                ],
              },
            ],
          };
          let option2 = {
            tooltip: {
              trigger: 'item',
            },
            toolbox: {
              show: false,
            },
            color: ['#7ec5ff', '#ffb066', '#e5605b'],
            series: [
              {
                name: '任务完成',
                type: 'pie',
                radius: '50%',
                center: ['50%', '50%'],
                label: {
                  formatter: '{b}\n({d}%)',
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
                data: [
                  { value: orgBoardData.value.task?.finishcount, name: '已完成' },
                  { value: orgBoardData.value.task?.timeoutfinishcount, name: '超时完成' },
                  {
                    value:
                      orgBoardData.value.task?.count -
                      orgBoardData.value.task?.finishcount -
                      orgBoardData.value.task?.timeoutfinishcount,
                    name: '未完成',
                  },
                ],
              },
            ],
          };
          let series = [
            {
              type: 'bar',
              stack: 'total',
              barWidth: '30px',
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: [
                res.taskcheck.finishcount,
                res.taskfacility.finishcount,
                res.tasktrouble.finishcount,
                res.taskinspect.finishcount,
                res.taskjob.finishcount,
              ],
              name: '已完成',
            },
            {
              name: '超时完成',
              type: 'bar',
              stack: 'total',
              barWidth: '30px',
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: [
                res.taskcheck.timeoutfinishcount,
                res.taskfacility.timeoutfinishcount,
                res.tasktrouble.timeoutfinishcount,
                res.taskinspect.timeoutfinishcount,
                res.taskjob.timeoutfinishcount,
              ],
            },
            {
              name: '未完成',
              type: 'bar',
              stack: 'total',
              barWidth: '30px',
              label: {
                show: true,
              },
              emphasis: {
                focus: 'series',
              },
              data: [
                res.taskcheck.count - res.taskcheck.finishcount - res.taskcheck.timeoutfinishcount,
                res.taskfacility.count -
                  res.taskfacility.finishcount -
                  res.taskfacility.timeoutfinishcount,
                res.tasktrouble.count -
                  res.tasktrouble.finishcount -
                  res.tasktrouble.timeoutfinishcount,
                res.taskinspect.count -
                  res.taskinspect.finishcount -
                  res.taskinspect.timeoutfinishcount,
                res.taskjob.count - res.taskjob.finishcount - res.taskjob.timeoutfinishcount,
              ],
            },
          ];

          let option3 = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
              },
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: {
              type: 'category',
              axisLabel: {
                color: '#6c706f',
                interval: 0,
              },
              data: ['自查类', '设备设施类', '隐患治理类', '督查类', '作业活动类'],
            },
            yAxis: {
              minInterval: 1,
              type: 'value',
            },
            color: ['#7ec5ff', '#ffc443', '#e15252'],
            series: series,
          };
          myChart3.setOption(option1);
          myChart4.setOption(option2);
          myChart5.setOption(option3);
          myChart6.setOption(option4);
          document.getElementById('troubleCorrectDom').setAttribute('_echarts_instance_', '');
          document.getElementById('evaluateDom').setAttribute('_echarts_instance_', '');
          document.getElementById('taskChartDom1').setAttribute('_echarts_instance_', '');
          document.getElementById('taskChartDom2').setAttribute('_echarts_instance_', '');
        });
      }

      onMounted(() => {
        let hazardChartDom = null;
        let troubleChartDom = null;
        getUserOrganization(projectCode.value).then((res) => {
          orgcode.value = res.orgcode ?? '';
          getOrgLatestStatus(orgcode.value).then((res) => {
            orgStatusData.value = res;
            hazardChartDom = document.getElementById('hazardChartDom');
            troubleChartDom = document.getElementById('troubleChartDom');
            myChart1 = echarts.init(hazardChartDom);
            let option1 = {
              tooltip: {
                trigger: 'item',
              },
              toolbox: {
                show: false,
              },
              color: ['#8ed4ff', '#ffee76', '#ff9f12', '#fa7f7c'],
              series: [
                {
                  name: '危险源',
                  type: 'pie',
                  radius: ['20%', '50%'],
                  label: {
                    formatter: '{b}\n({d}%)',
                  },
                  avoidLabelOverlap: false,
                  padAngle: 5,
                  center: ['50%', '50%'],
                  itemStyle: {
                    borderRadius: 8,
                  },
                  minAngle: 1,
                  data: [
                    {
                      name: '低风险',
                      value: orgStatusData.value.hazard?.bluecount,
                    },
                    {
                      name: '一般风险',
                      value: orgStatusData.value.hazard?.yellowcount,
                    },
                    {
                      name: '较大风险',
                      value: orgStatusData.value.hazard?.orangecount,
                    },
                    {
                      name: '重大风险',
                      value: orgStatusData.value.hazard?.redcount,
                    },
                  ],
                },
              ],
            };
            myChart1.setOption(option1);
            document.getElementById('hazardChartDom').setAttribute('_echarts_instance_', '');
            myChart2 = echarts.init(troubleChartDom);
            let option2 = {
              tooltip: {
                trigger: 'item',
              },
              toolbox: {
                show: false,
              },
              color: ['#8ed4ff', '#ffee76', '#ff9f12', '#fa7f7c'],
              series: [
                {
                  name: '隐患',
                  type: 'pie',
                  radius: ['20%', '50%'],
                  label: {
                    formatter: '{b}\n({d}%)',
                  },
                  minAngle: 1,
                  avoidLabelOverlap: false,
                  padAngle: 5,
                  center: ['50%', '50%'],
                  itemStyle: {
                    borderRadius: 8,
                  },
                  data: [
                    {
                      name: '低风险',
                      value: orgStatusData.value.trouble?.bluecount,
                    },
                    {
                      name: '一般风险',
                      value: orgStatusData.value.trouble?.yellowcount,
                    },
                    {
                      name: '较大风险',
                      value: orgStatusData.value.trouble?.orangecount,
                    },
                    {
                      name: '重大风险',
                      value: orgStatusData.value.trouble?.redcount,
                    },
                  ],
                },
              ],
            };
            myChart2.setOption(option2);
            document.getElementById('troubleChartDom').setAttribute('_echarts_instance_', '');
            search();
            window.onresize = function () {
              myChart1.resize();
              myChart2.resize();
              myChart3.resize();
              myChart4.resize();
              myChart5.resize();
              myChart6.resize();
            };
          });
        });
      });

      function validateRoute(key) {
        if (userStore.validateRoute(key) == true) {
          router.push({
            path: key,
          });
        } else {
          createMessage.error('暂无访问权限。');
          return;
        }
      }

      function gotoHazardLedger() {
        validateRoute('/ehs/hazard/dangerledger');
      }

      function gotoTroubleLedger() {
        validateRoute('/ehs/hazard/risksledger');
      }

      function gotoIdentifyHazard() {
        validateRoute('/ehs/hazard/identify');
      }

      function gotoTaskLedger() {
        validateRoute('/ehs/taskConsole');
      }

      function gotoEvaluate() {
        validateRoute('/ehs/hazard/evaluate');
      }

      function openDeptBoardDrawerButtonClick() {
        let propsData: QcUnifyTransToChildProps = {
          moduleName: '安全生产看板',
          operateString: orgBoardData.value.name,
          deptid: orgBoardData.value.deptid,
          deptName: orgBoardData.value.name,
          orgcode: orgcode.value,
        };
        openDeptBoardDrawer(true, propsData);
      }

      return {
        orgBoardData,
        orgStatusData,
        choosetmType,
        changeChooseTm,
        openDeptBoardDrawerButtonClick,
        registerDeptBoardDrawer,
        gotoHazardLedger,
        gotoTroubleLedger,
        gotoIdentifyHazard,
        gotoTaskLedger,
        gotoEvaluate,
      };
    },
  });
</script>

<style scoped>
  .flexBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
  }

  .boldFont {
    font-size: 25px;
    font-weight: bold;
    margin: 10px;
  }
  .icon {
    font-size: 22px;
    color: #4090ff;
    margin: 5px;
  }
  .a-row {
    margin-bottom: 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
  }

  ::v-deep(.ant-card-grid) {
    padding: 10px;
  }
  .greenFont {
    color: #48d326;
    font-size: 17px;
  }
  .yellowFont {
    color: #e3f33b;
    font-size: 17px;
  }
  .redFont {
    color: #c60202;
    font-size: 17px;
  }
  .orangeFont {
    color: orange;
    font-size: 17px;
  }
  .ant-card {
    width: 100%;
    height: 100%;
  }
  ::v-deep(.ant-card.ant-card-bordered.ant-card-contain-grid) {
    width: 100%;
    display: flex;
    height: 100%;
    flex-direction: column;
  }

  ::v-deep(.ant-card-contain-grid:not(.ant-card-loading) .ant-card-body) {
    height: 100%;
    flex: 1;
  }

  ::v-deep(.ant-statistic-content-suffix) {
    font-size: 14px;
    color: #8d8686;
  }
</style>
